<!--采购模式配置-->
<template>
  <div>
    <cus-card :showTitle="false">
      <div class="btnBox">
        <cusButton type="primary" v-permission="20" @onClick="onAdd()" >添加</cusButton>
      </div>
      <cusTable
        border
        :loading="loading"
        :columns="columns"
        :data="data"
        :customHeight="240"
        :size="vuex_config.tableSize"
        :bottomClass="['cus-page']"
      >
        <template slot-scope="{ row }" slot="operation">
          <div class="flex">
            <cus-button
              type="text"
              size="small"
              v-permission="30"
              :style="{ color: row.checkStatus == 1?'green':'#1E6FFF' }"
              style="padding: 0 8px"
              @onClick="onStatus(row)"
            >
              <Icon v-if="row.checkStatus == 1" type="md-checkmark-circle" size="4" style="margin: 2px 5px 0 0" />
              <Icon v-if="row.checkStatus == 0" type="md-remove-circle" size="4" style="margin: 2px 5px 0 0" />
              <span> {{row.checkStatus == 1 ? '默认采购模式':'设为默认模式' }}</span>
            </cus-button>
            <cus-button
              type="text"
              size="small"
              v-permission="30"
              :style="{ color: '#1E6FFF' }"
              style="padding: 0 8px"
              @onClick="onEdit(row)"
            >
              <Icon
                type="md-color-filter"
                size="4"
                style="margin: 2px 5px 0 0"
              />
              <span>编辑</span>
            </cus-button>
            <cus-button
              type="text"
              size="small"
              v-permission="40"
              :disabled="row.systemPattern === 1"
              :style="{ color: row.systemPattern === 1 ?'':'#FF4746' }"
              style="padding: 0 5px"
              @onClick="onDelete(row)"
            >
              <Icon type="md-trash" size="4" style="margin: 2px 5px 0 0" />
              <span>删除</span>
            </cus-button>
          </div>
        </template>
      </cusTable>
      <div class=" cus_page">
        <cus-page
          :data="pages"
          class="mt_20"
          @pageChange="selectFoodBookServicePurchasingPatternApi()"
        ></cus-page>
      </div>
    </cus-card>
    <addProcurement ref="addProcurement"></addProcurement>
  </div>
</template>
<script>
import {
  selectFoodBookServicePurchasingPattern,
  deleteFoodBookServicePurchasingPattern,
  settingFoodBookServicePurchasingPattern
} from "@/api/business/manager";
import addProcurement from "./components/addProcurement.vue";
const form = {
  id: "",
  name: "", //采购名称
};
const columns = [
  {
    title: "序号",
    type: "index",
    width: 70,
    align: "center",
  },
  {
    title: "采购模式名称",
    minWidth: 150,
    key: "name",
    align: "center",
  },
  {
    title: "采购计划提前量",
    minWidth: 150,
    key: "materialName",
    align: "center",
    render: (h, params) => {
      return h("div", [
        h(
          "span",
          params.row.purchasingWay == 0
            ? "当日采购"
            : params.row.purchasingWay == 1
            ? "提前一日采购"
            : params.row.purchasingWay == 2
            ? "提前采购次日早餐"
            : "提前采购次日早餐、午餐"
        ),
      ]);
    },
  },
  {
    title: "创建时间",
    minWidth: 150,
    key: "createDate",
    align: "center",
  },
  {
    title: "操作",
    width: 280,
    fixed: "right",
    slot: "operation",
    align: "center",
  },
];
export default {
  name: "procurementDetermaination",
  components: { addProcurement },

  data() {
    return {
      form: form,
      columns: columns,
      data: [],
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      loading: false,
    };
  },
  mounted() {
    this.onInit();
  },
  methods: {
    onInit() {
      this.selectFoodBookServicePurchasingPatternApi();
    },
    //添加
    onAdd() {
      this.$refs["addProcurement"].show();
    },
    onEdit(row) {
      this.$refs["addProcurement"].show();
      this.$refs["addProcurement"].form = this.$cu.deepClone(row);
      this.$refs["addProcurement"].selectFoodBookServicePurchasingPatternDtlApi();
    },
    onStatus(row) {
      this.settingFoodBookServicePurchasingPatternApi(row.id);
    },
    onDelete(row) {
      this.$cu
        .dialog({
          params: row,
        })
        .then(({ id }) => {
          this.deleteFoodBookServicePurchasingPatternApi(id);
          //删除接口
        });
    },
    //采购模式列表数据--------------------------接口
    selectFoodBookServicePurchasingPatternApi() {
      return new Promise((resolve) => {
        let params = {
          patternName: this.form.name,
          current: this.pages.page,
          size: this.pages.pageSize,
        };
        selectFoodBookServicePurchasingPattern(params).then((res) => {
          if (res.retCode == 2000) {
            this.data = res.data.records;
            this.pages.pageTotal = res.data.total;
            resolve();
          }
        });
      });
    },
    //删除------------------------------------接口
    deleteFoodBookServicePurchasingPatternApi(id) {
      return new Promise((resolve) => {
        deleteFoodBookServicePurchasingPattern({
          purchasingPatternId: id,
        }).then((res) => {
          if (res.retCode == 2000) {
            this.onInit();
            this.$Message.success(res.retMsg)
            resolve();
          }
        });
      });
    },
    //设置默认采购模式--------------------------接口
    settingFoodBookServicePurchasingPatternApi(id) {
      this.loading = true;
      return new Promise((resolve) => {
        settingFoodBookServicePurchasingPattern({
          purchasingPatternId: id,
        }).then((res) => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.onInit();
            resolve();
          }
        });
      });
    }
  },
  watch: {},
  computed: {},
};
</script>
<style lang="less" scoped>
.btnBox {
  padding-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}
/deep/.flex .ivu-btn > span {
  display: flex;
  align-items: center;
}
</style>
